<template>
  <view class="refund">
    <view class="bgRadius shopInfo">
      <view class="homeTitle"><text>退款商品</text></view>
      <view class="shopList">
        <view class="shopItem flex flex-bt" style="margin-top: -10rpx;">
          <view class="left flex">
            <image :src="getImgUrl(dataInfo.goods_image)"  mode="scaleToFill" />
            <view class="flex flex-direction flex-bt">
              <view class="name">{{dataInfo.goods_name}}</view>
              <view class="text">
                <view>
                  <text v-for="(item,index) in dataInfo.goods_specs" :key="index">{{ item }} <text v-if="index<(dataInfo.goods_specs.length-1)">,</text></text>
                </view>
              </view>
            </view>
          </view>
          <view class="right">
            <view class="price">
              <text v-if="goodTypeData?.id==1">￥</text>{{dataInfo.goods_price}} <text v-if="goodTypeData?.id!=1">{{goodTypeData?.name}}</text>
            </view>
            <view class="number">x{{dataInfo.goods_num}}</view>
          </view>
        </view>
        <view class="list flex flex-align flex-bt">
          <view class="name">订单编号</view>
          <view class="value">{{dataInfo.order_no}}</view>
        </view>
      </view>
    </view>
    <view class="bgRadius shopInfo">
      <view class="homeTitle"><text>退款设置</text></view>
      <view class="list">
        <view class="flex flex-align flex-bt" style="padding: 0;">
          <view class="name">退款类型</view>
          <view class="value flex flex-align">
            <picker @change="constbindPickerChange" :value="index" :range="array">
              <view class="uni-input">{{array[index]}}</view>
            </picker>
            <uni-icons type="right" size="16" color="#333"></uni-icons>
          </view>
        </view>
        <view class="flex flex-align flex-bt" style="padding: 0;" v-if="false">
          <view class="name">退款数量</view>
          <view class="value flex flex-align jiNumber">
            <uni-icons @click="jianNum" style="margin-right: -20rpx;position: relative;z-index: 11;" type="minus-filled" size="30" color="#FE7431"></uni-icons>
            <view @click="false">{{number}}</view>
            <uni-icons @click="addNum" style="margin-left: -20rpx;position: relative;z-index: 11;" type="plus-filled" size="30" color="#FE7431"></uni-icons>
          </view>
        </view>
        <view class="flex flex-align flex-bt">
          <view class="name">退款金额</view>
          <view class="value" v-if="goodTypeData?.id==1">¥{{dataInfo.order_cash_amount}}</view>
          <view class="value" v-if="goodTypeData?.id!=1">
            <text v-if="dataInfo.order_cash_amount!=0">{{dataInfo.order_cash_amount}}+</text>
            {{dataInfo.order_amount}}{{goodTypeData?.name}}
          </view>
        </view>
        
        <!-- <view class="flex flex-align flex-end youhui" @click="openCoupon" v-if="dataInfo.return_coupon">
          <view class="name">使用部分优惠将退还</view>
          <uni-icons type="right" size="16" color="#B3B5B7"></uni-icons>
        </view> -->
        <view class="flex flex-align flex-bt" style="padding-bottom: 0;" v-if="dataInfo.return_coupon" @click="openCoupon">
          <view class="name">回收赠品</view>
          <view class="value red flex flex-align">
            <view>{{dataInfo.return_coupon[0].name}}*{{ dataInfo.return_coupon[0].num }}...</view>
            <uni-icons type="right" size="16" color="#FE7431"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    <view class="bgRadius refundInfo">
      <view class="homeTitle flex flex-align flex-bt">
        <text>退款说明</text>
        <view style="font-size: 24rpx;">{{content.length}}/500</view>
      </view>
      <textarea v-model="content" placeholder="请详细填写退款说明～" placeholder-class="textarea-placeholder" />
      <view class="example-body">
				<!-- <uni-file-picker limit="3" title="最多选择3张图片"></uni-file-picker> -->
        <uni-file-picker 
          v-model="imageValue" 
          :image-styles="imageStyles"
          limit="3"
          fileMediatype="image" 
          mode="grid" 
          @select="select" 
          @delete="deletes"
        >
        <view class="upLoadImg flex flex-center flex-align">
          <view class="example-body__item__image">
            <image src="@/static/shop/shop10.png" mode="scaleToFill" />
            <view>上传</view>
          </view>
        </view>
        </uni-file-picker >
			</view>
    </view>
    <view class="btn" @click="submited">确认提交</view>
    <giftdetail ref="giftdetailRef" v-if="dataInfo.return_coupon" :dataInfo="dataInfo.return_coupon"></giftdetail>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import giftdetail from '../shop/components/giftdetail.vue';
import { onLoad } from '@dcloudio/uni-app';
import { getImgUrl, uploadFile } from '@/utils/tools';
import { goodStorage } from '@/utils';
import { applyrefund } from '@/api/user';
const giftdetailRef = ref<InstanceType<typeof giftdetail>>()
async function openCoupon(){
  giftdetailRef.value?.open()
}
const imageStyles={
  width:'180rpx',
  height:'180rpx',
  background:'#F5F6F7',
}
const number = ref(0)
const content = ref('')
const array = ['仅退款'];
const index = ref(0)
const imageValue = ref<string[]>([])
const dataInfo = ref<Recordable>({})
const goodTypeData = ref<Recordable>({})
const constbindPickerChange = (e: any) => {
  index.value = e.detail.value
  console.log('picker发送选择改变，携带值为', e.detail.value)
}
const select = (e: any) => {
  console.log(e)
  e.tempFilePaths.forEach((item:any)=>{
    uploadFile(item).then((res:any)=>{
      imageValue.value.push(res.fileName)
    })
  })
}
const deletes = (e: any) => {
  imageValue.value.splice(e.index, 1)
}


const addNum = () => {
  if(number.value == dataInfo.value.goods_num) return
  number.value++
}
const jianNum = () => {
  if(number.value == 1) return
  number.value--
}
onLoad((e) => {
  dataInfo.value = goodStorage.get('routerInfo')
  goodTypeData.value = dataInfo.value.goodTypeData
  number.value = dataInfo.value.goods_num
  console.log(dataInfo.value)
})
function submited(){
  const params = {
    order_id:dataInfo.value.order_id,
    num:number.value,
  }
  applyrefund(params).then((res:any)=>{
    uni.showToast({
        title: '退款申请提交成功',
        icon: 'none',
        duration: 1000
      });
      setTimeout(() => {
        uni.navigateBack()
      }, 1000);
  })
}
</script>

<style scoped lang="scss">
.refund{padding: 20rpx;
  .btn{width: 100%;height: 80rpx;background: #FE7431;color: #fff;font-size: 28rpx;text-align: center;line-height: 80rpx;border-radius: 40rpx;margin-top: 30rpx;}
  .refundInfo{
    textarea{
      width: 100%;
      height: 260rpx;
      font-size: 28rpx;
      color: #333;
    }
    .textarea-placeholder{
      color: #969799;
      font-size: 28rpx;
    }
    .upLoadImg{text-align: center;width: 180rpx;height:180rpx;background: #F5F6F7;
      image{
        width: 70rpx;height: 70rpx;
      }
    }
  }
  .shopInfo{
    .list{
      .youhui.flex{padding: 0 0 10rpx;
       .name{font-size: 24rpx;color: #B3B5B7;}
      }
      .flex{padding: 12rpx 0;
        .name{font-size: 28rpx;color: #969799;}
        .value{font-size: 28rpx;color: #333;font-weight: bold;
          input{border: none;outline: none;font-size: 28rpx;color: #333;text-align: right;width: 500rpx;}
        }
        .jiNumber{
          view{background: #F5F6F7;height: 50rpx;text-align: center;font-weight: normal;width: 80rpx;line-height: 50rpx;}
        }
        .red{
          color: #FE7431;
        }
      }
    }
  }
  .shopList{
    .shopItem{padding: 20rpx 0;
      .left{
        image{width: 170rpx;height: 170rpx;}
        .flex-direction{margin-left: 20rpx;
          .name{font-size: 28rpx;color: #333;width: 320rpx;font-weight: bold;}
          .text{font-size: 24rpx;color: #969799;margin-top: 10rpx;
          view{background: #F5F6F7;border-radius: 40rpx;padding: 4rpx 20rpx;display: inline-block;}
          }
        }
      }
      .right{text-align: right;font-weight: bold;
        .price{font-size: 32rpx;color: #323233;
          text{font-size: 24rpx;}
        }
        .number{font-size: 24rpx;color: #969799;margin-top: 10rpx;}
      }
      
    }
    .list{margin-top: 10rpx;
      .name{font-size: 28rpx;color: #969799;}
      .value{font-size: 28rpx;color: #333;font-weight: bold;}
    }
  }
}
</style>